<template>
    <!-- 借贷历史 -->
    <div class="loanHistory">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list class="loanHistory-list" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
                <van-collapse v-model="activeNames" accordion @change="change"> 
                        <van-collapse-item :name="item.id" v-for="item in listData" :key="item.id">
                            <template #title>
                                <div class="list-left">
                                    <p :class="['left-title','color1','mb-5',activeNames === item.id ? 'active':'']">订单号</p>
                                    <p class="color2 font-34 font-600 mb-5">{{ item.code }}</p>
                                    <div class="flex items-center">
                                        <van-icon class="mr-5" name="warning-o" @click.stop="hint"/>
                                        <p class="left-state color3 font-26">{{ item.state }}</p>
                                    </div>
                                </div>
                            </template>
                            <template #right-icon>
                                <button class="list-button" @click.stop="contractShow = true">借贷合同</button>
                            </template>
                            <template #default>
                                <div class="list-content">
                                    <div class="flex justify-between items-center py-10 content-detail" v-for="(value,key) in listName" :key="key">
                                        <p class="font-28">{{ value }}</p>
                                        <p class="font-28">{{ item[key] }}</p>
                                    </div>
                                    <div class="flex justify-center">
                                        <button class="content-button" @click="detailsShow = true">还币详情</button>
                                    </div>
                                </div>
                            </template>
                        </van-collapse-item>
                    </van-collapse>
            </van-list>
        </van-pull-refresh>
        <van-popup v-model="contractShow" position="bottom" class="contract-pop">
            <loanContract @close="(val)=> contractShow = val" />
        </van-popup>
        <van-popup v-model="detailsShow" position="bottom" class="details-pop">
            <loanDetails @close="(val)=> detailsShow = val" />
        </van-popup>
    </div>
</template>

<script>
import { List, PullRefresh, Popup, Collapse, CollapseItem, Dialog } from 'vant';
import loanDetails from './loanDetails.vue';
import loanContract from './loanContract.vue';
export default {
    components: {
        [List.name]: List,
        [PullRefresh.name]: PullRefresh,
        [Popup.name]: Popup,
        [Collapse.name]:Collapse,
        [CollapseItem.name]:CollapseItem,
        [Dialog.name]:Dialog,
        loanDetails,
        loanContract,
    },
    data() {
        return {
            loading: false,
            finished:true,
            refreshing:false,
            activeNames:'',
            listData:[
                {
                    id:0,
                    code:'12345678',
                    state:'拒绝',
                    startTime:'2024-12-24 21:21:21',
                    number:'111USDT',
                    amount:'0USDT',
                    theTerm:'20天',
                    endTime:'2024-01-16 21:21:21',
                    day:'1%',
                    all:'0USDT',
                    fee:'10USDT',
                    overdue:'0天',
                    LatePaymentFeePercentage:'9%',
                    LatePaymentFee:'0USDT',
                    lumpSum:'121USDT'
                },
                {
                    id:1,
                    code:'1654654564654656548',
                    state:'已还款',
                    startTime:'2024-12-24 21:21:21',
                    number:'111USDT',
                    amount:'0USDT',
                    theTerm:'20天',
                    endTime:'2024-01-16 21:21:21',
                    day:'1%',
                    all:'0USDT',
                    fee:'10USDT',
                    overdue:'0天',
                    LatePaymentFeePercentage:'9%',
                    LatePaymentFee:'0USDT',
                    lumpSum:'3331USDT'
                },
            ],
            listName:{
                startTime:'借款时间',
                number:'借款数量',
                amount:'保证金',
                theTerm:'借款期限',
                endTime:'还款日期',
                day:'日利息',
                all:'总利息',
                fee:'总服务费',
                overdue:'逾期天数',
                LatePaymentFeePercentage:'滞纳金百分比',
                LatePaymentFee:'滞纳金',
                lumpSum:'还款总额',

            },
            contractShow:false,
            detailsShow:false,
        }
    },
    methods: {
        // 上拉加载
        onLoad() {
            console.log(11);
            
        },
        // 下拉刷新
        onRefresh() {
            console.log(22);
            this.refreshing = false;
        },
        hint(){
            Dialog.alert({
                message: '无数据',
                confirmButtonText:'确认',
                confirmButtonColor:'#FF0101',
                getContainer:'.loanHistory',
            }).then(() => {});
        },
        change(id){
            
        }
    },
}
</script>

<style lang="scss" scoped>
.loanHistory{
    background-color: #f2f4f6;
    padding: 16px;
    ::v-deep .loanHistory-list{
        .van-cell{
            padding: 20px;
        }
        .van-collapse-item{
            margin-bottom: 20px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }
        .list-left{
            margin-right: 30px;
            .left-title{
                display: flex;
                align-items: center;
                gap: 10px;
                &::before{
                    width: fit-content;
                    content: '';
                    display: block;
                    border-left: 10px solid transparent;
                    border-right: 10px solid transparent;
                    border-top: 12px solid #848e9c;
                    transform: rotate(0deg);
                }
            }
            .active{
                &::before{
                    transform: rotate(180deg);
                }
            }
            .left-state{
                width: fit-content;
                background-color: #ccc;
                padding: 0 10px;
            }
        }
        .list-content{
            color: #222;
            .content-detail{
                &:nth-of-type(5){
                    padding-bottom: 20px;
                    border-bottom: 1px dashed #000;
                    margin-bottom: 10px;
                }
            }
        }
        .list-button{
            min-width: 140px;
            width: fit-content;
            height: 82px;
            background-color: transparent;
            border: 1px solid #88c506;
            color: #88c506;
            border-radius: 14px;
            padding: 0 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .content-button{
            width: 100%;
            height: 74px;
            margin-top: 50px;
            background-color: #fff;
            border: 1px solid #000;
            border-radius: 12px;
            padding: 0 10px;
            text-align: center;
            font-size: 38px;
        }
    }
    .color1{
        color: #848e9c;
    }
    .color2{
        color: #222;
    }
    .color3{
        color: #fff;
    }
    ::v-deep .contract-pop,.details-pop{
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
    ::v-deep  .van-dialog{
        background-color: #fff;
        .van-dialog__message{
            color: #000;
        }
        .van-dialog__footer{
            background: #fff;
            .van-button--default{
                background: #fff;
            }
        }
    }
}
</style>